<template>
  <div>
    <div class="role-manage">
      <div class="left-wrapper">
        <div
          v-for="item in rolesList"
          :key="item.roleId"
          class="role-item"
          :class="{ activeClass: active == item.roleName }"
          @mouseup="selected(item.roleName,item.roleId)"
        >
          <el-tooltip v-if="item.remark" class="item" effect="dark" :content="item.remark" placement="top-end">
            <span class="role-info">
              <!-- 图标 -->
              <!-- 名字 -->
              <span class="info-name">{{ item.roleName }}</span>
            </span>
          </el-tooltip>
          <span v-else class="role-info">
            <!-- 图标 -->
            <!-- 名字 -->
            <span class="info-name">{{ item.roleName }}</span>
          </span>

          <el-dropdown trigger="click" @command="handleCommand">
            <span class="more"><i class="el-icon-more-outline" /></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="edit">编辑角色</el-dropdown-item>
              <el-dropdown-item style="color:red" command="del">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </div>
        <!-- 添加角色按钮 -->
        <el-button class="addBtn" @click="$router.push('/system/role/add')">添加角色</el-button>
      </div>
      <div class="right-wrapper">
        <el-tabs
          v-model="activeName"
        >
          <el-tab-pane label="功能权限" name="first" class="tabPane">
            <div v-for="(item) in treeList" :key="item.id" class="menu-item">
              <div class="header">{{ item.title }}</div>
              <div class="content none">
                <el-tree
                  ref="tree"
                  :disabled="true"
                  :data="item.children"
                  show-checkbox
                  default-expand-all
                  node-key="id"
                  :expand-on-click-node="false"
                  highlight-current
                  :props="defaultProps"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'成员'+'('+userTotal+')'" name="second">
            <!-- 用户表格 -->
            <custom-table
              ref="table"
              :columns="tableColumns"
              :action-url="actionURL"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable2.vue'

import { delRoleAPI, getRoleDetailAPI, getRolesAPI, getTreeListAPI } from '@/api/system'
import { onSecondConfirm } from '@/utils'
export default {
  components: { CustomTable },

  data() {
    return {
      active: '',
      rolesList: [],
      activeName: 'first',
      treeList: [],
      perms: [],
      userTotal: 0,
      actionURL: '',
      tableColumns: [
        { label: '员工姓名', prop: 'name' },
        { label: '登录账号', prop: 'userName' }
      ],
      defaultProps: { label: 'title', value: 'id', disabled: this.isdisabledFn },
      roleDetail: {}
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    handleCommand(command) {
      if (command === 'edit') {
        // 做编辑
        this.$router.push({ path: '/system/role/add', query: { id: this.roleDetail.roleId }})
      } else {
        // 做删除
        if (this.roleDetail.userTotal > 0) {
          onSecondConfirm({ content: '删除角色前，请先移除角色内的所有成员。', handler: () => { } })
        } else {
          onSecondConfirm({ content: '删除后该角色下的用户权限失效，是否删除？', handler: async() => {
            await delRoleAPI(this.roleDetail.roleId)
            this.$message.success('删除成功!')
            this.onLoad()
          } })
        }
      }
    },
    async onLoad() {
      this.rolesList = await getRolesAPI()
      this.treeList = await getTreeListAPI()
      this.selected(this.rolesList[0].roleName, this.rolesList[0].roleId)
      this.loopMuduleTreeDisabled(this.treeList, this)
    },
    isdisabledFn() {
      return true
    },
    async selected(name, id) {
      this.active = name
      // 根据id发请求
      const res = await getRoleDetailAPI(id)
      this.roleDetail = res
      this.perms = res.perms
      this.userTotal = res.userTotal
      // 路径更新
      this.actionURL = '/park/sys/roleUser/' + id
      // 选中节点
      this.$nextTick(() => {
        this.perms.forEach((item, i) => {
          this.$refs.tree[i].setCheckedKeys(item)
        })
      })
    },
    // 禁止点击树节点
    loopMuduleTreeDisabled(arr, that) {
      arr.forEach((item) => {
        that.$set(item, 'disabled', true)
        if (item.children && item.children.length > 0) {
          this.loopMuduleTreeDisabled(item.children, that)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.role-manage {
  display: flex;
  height: 100%;
  flex-direction: row;
  .left-wrapper {
    width: 220px;
    border-right: 1px solid #e4e7ec;
    padding: 4px;
    text-align: center;
    .role-item {
      display: flex;
      justify-content: space-between;
      position: relative;
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      cursor: pointer;
    }
    .activeClass {
      background: #edf5ff;
      color: #4770ff;
    }
  }
  .right-wrapper {
     width: 100%;
     .tabPane{
      display: flex;
     }
    .menu-item {
      flex: 1;
      // width: 20%;
      border-right: 1px solid #e4e7ec;
      padding: 20px;
      .header {
        background: #f5f7fa;
        text-align: center;
        padding: 10px 0;
        margin-bottom: 12px;
      }
    }
  }
  .none{
    pointer-events:none;
}
  .addBtn {
    width: 100%;
    margin-top: 20px;
  }
  .el-button:focus,
  .el-button:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #fff;
  }
 ::v-deep .el-tabs__header {
  margin-bottom: 0px;
}
}

</style>
